<template>
  <div class="type-list">
    <th-button type="info">信息</th-button>
    <th-button type="warning">警告</th-button>
    <th-button type="error">错误</th-button>
    <th-button type="success">成功</th-button>
    <th-button>默认</th-button>
  </div>
  <div class="type-list">
    <th-button size="mini">mini小尺寸</th-button>
    <th-button size="small">小尺寸</th-button>
    <th-button size="primary">默认</th-button>
    <th-button size="big">大尺寸</th-button>
    <th-button size="max">加大尺寸</th-button>
    <th-button size="xm">超大尺寸</th-button>
  </div>
  <div class="markdown-container">
    <Markdown :source="source" />
  </div>
</template>
<script lang="ts" setup>
import ThButton from "@lib/Button";
import Markdown from "vue3-markdown-it";
// import MD from "./button.md";

const source = `
#### :sparkles: 按钮组件使用 :sparkles:

    import ThButton from "@lib/Button";

#### :sparkles: 按钮尺寸 :sparkles:

    <th-button size="mini">mini小尺寸</th-button>
    <th-button size="small">小尺寸</th-button>
    <th-button size="primary">默认</th-button>
    <th-button size="big">大尺寸</th-button>
    <th-button size="max">加大尺寸</th-button>
    <th-button size="xm">超大尺寸</th-button>

#### :sparkles: 按钮类别 :sparkles:

    <th-button type="info">信息</th-button>
    <th-button type="warning">警告</th-button>
    <th-button type="error">错误</th-button>
    <th-button type="success">成功</th-button>
    <th-button>默认</th-button>
`;
</script>
<style lang="scss" scoped>
.type-list {
  .t-button {
    margin-right: 15px;
  }
}
.markdown-container {
  padding: 20px;
  width: 650px;
  height: 300px;
}
</style>
